<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Display a popup</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
<div id="map"></div>
<script>
  // TO MAKE THE MAP APPEAR YOU MUST
  // ADD YOUR ACCESS TOKEN FROM
  // https://account.mapbox.com
  mapboxgl.accessToken ='pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tyZWN3amRmMXlvNjJwcDhjMmp2dmNhdSJ9.tXwGurJrDL8trPienpr-bg';
  const map = new mapboxgl.Map({
    container: 'map',
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-96, 37.8],
    zoom: 3
  });

  const popup = new mapboxgl.Popup({ closeOnClick: false })
          .setLngLat([-96, 37.8])
          .setHTML('<h1>Hello World!</h1>')
          .addTo(map);
</script>

</body>
</html>